<template>
  <div id="mgt"></div>
</template>

<script>
import { defineComponent, ref, onMounted, computed, nextTick } from "vue";
export default defineComponent({
  name: "Mgt",
});
</script>
<script setup>
import * as echarts from "echarts";
import "echarts-gl";

// nextTick 异步任务
nextTick(() => {
  let dom = document.getElementById("mgt");
  console.log(dom);
  let myChart = echarts.init(dom, null, { renderer: "svg" });
  let data = [
    { value: 50, name: "文书卷/件" },
    { value: 30, name: "专业" },
    { value: 15, name: "科技" },
  ];
  let option = {
    tooltip: {
      trigger: "item",
      formatter: "{b} : {c}  {d}%",
    },
    toolbox: {
      show: true,
    },
    legend: {
      show: true,
      orient: "vertical",
      left: "0%",
      top: "18%",
      itemGap: 30,
      textStyle: {
        color: "black",
        fontSize: 12,
      },
      data: data.map((v) => v.name),
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: ["12%", "70%"],
        avoidLabelOverlap: true,
        roseType: "area",
        itemStyle: {
          // borderRadius: 10,
          borderWidth: 2,
          color: function (params) {
            const colorList = [
              {
                c1: " rgba(21, 239, 230, 1)",
                c2: "rgba(96, 187, 255, 1)",
              },
              {
                c1: " rgba(78, 147, 249, 1)",
                c2: "rgba(2, 31, 202, 1)",
              },
              {
                c1: "rgba(210, 60, 146, 1)",
                c2: "rgba(250, 151, 31, 1)",
              },
            ];
            console.log(colorList[params.dataIndex]);
            return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                color: colorList[params.dataIndex].c1,
              },
              {
                offset: 1,
                color: colorList[params.dataIndex].c2,
              },
            ]);
          },
        },

        label: {
          normal: {
            show: false,
            formatter: "{c}",
            position: "outside",
            color: "#fff",
          },
          emphasis: {
            show: false,
          },
        },
        labelLine: {
          show: false, //显示引导线
          length: 30, //连接饼图第1段线条的长度 length length2 不写自适应
          length2: 10, //链接饼图第2段线条长度
          smooth: true, //是否光滑连接线
        },
        // label: {
        //   show: true,
        //   position: 'center'
        // },

        emphasis: {
          label: {
            show: true,
            fontSize: "20",
            fontWeight: "bold",
            formatter: (params) => {
              return "{a|" + params.name + "}\n{b|" + params.value + "}";
            },
            rich: {
              a: {},
              b: {},
            },
          },
        },
        data: data,
      },
    ],
  };

  var currentIndex = 0;
  var timer = 0;
  function animate() {
    timer = setInterval(function () {
      var dataLen = option.series[0].data.length;
      // 取消之前高亮的图形
      myChart.dispatchAction({
        type: "downplay",
        seriesIndex: 0,
        dataIndex: currentIndex,
      });
      currentIndex = (currentIndex + 1) % dataLen;
      // 高亮当前图形
      myChart.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: currentIndex,
      });
    }, 1500);
  }
  // animate();

  myChart.on("mouseover", function (e) {
    clearInterval(timer);
    // 取消之前高亮的图形
    myChart.dispatchAction({
      type: "downplay",
      seriesIndex: 0,
    });
    myChart.dispatchAction({
      type: "highlight",
      dataIndex: e.dataIndex,
    });
  });

  myChart.on("mouseout", function (e) {
    currentIndex = e.dataIndex;
    // animate();
  });
  myChart.setOption(option);
});
</script>

<style lang="scss" scoped>
#mgt {
  width: 50vw;
  height: 50vh;
  background: white;
}
</style>
